<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <!-- <a-page-header title="返回" @back="() => $router.go(-1)" /> -->
    <a-form-model :model="info" ref="ruleForm" :rules="rules" @submit.native.prevent>
      <a-form-model-item label="轮播图名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="broadcastName">
        <a-input size="large" v-model="info.broadcastName" />
      </a-form-model-item>
      <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="broadcastImage">
        <a-input v-model="info.broadcastImage" style="display: none" />
        <single-image
          :url="info.broadcastImage"
          @ok="
            (url) => {
              info.broadcastImage = url
              $refs['ruleForm'].clearValidate('broadcastImage')
            }
          "
        >
        </single-image>
        <div v-if="width && height">图片尺寸：{{ width }}px x {{ height }}px</div>
      </a-form-model-item>
      <a-form-model-item label="位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="positionId">
        <a-select size="large" v-model="info.positionId" @change="changePosition">
          <a-select-option value="">请选择</a-select-option>
          <a-select-option :value="item.positionId" v-for="(item, index) in positionList" :key="index">{{
            item.positionName
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="跳转地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="broadcastUrl" rule="rule">
        <a-input size="large" v-model="info.broadcastUrl" />
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
          >保存</a-button
        >
        <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
// import pick from 'lodash.pick'
import SingleImage from '@/components/Upload/SingleImage'

export default {
  name: 'AdEdit',
  components: {
    SingleImage
  },
  data() {
    return {
      id: this.$route.params.id || '',
      info: {},
      rules: {
        broadcastName: [{ required: true, message: '轮播图名称必填', trigger: ['blur', 'change'] }],
        broadcastImage: [{ required: true, message: '图片必传', trigger: ['blur', 'change'] }],
        positionId: [{ required: true, message: '楼层必选', trigger: ['blur', 'change'] }],
        broadcastUrl: [
          {
            pattern: /^(((https?|ftp|news):\/\/|\w+(\.\w+)+)(:\w+)?).*/,
            message: '链接地址格式不正确',
            trigger: ['blur', 'change']
          }
        ]
      },
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      positionList: [],
      width: '',
      height: ''
    }
  },
  mounted() {
    // 获取位置列表
    this.getPositionList()
    // 获取信息
    this.formInit()
  },
  methods: {
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      } else {
        this.info = {
          broadcastName: '',
          broadcastImage: '',
          positionId: '',
          broadcastUrl: ''
        }
      }
    },
    // 获取位置信息
    getPositionList() {
      this.$common.handleGet('/broadcasts/positions').then((data) => {
        if (data.code === 200) {
          this.positionList = data.data
          if (data.data.length > 0) {
            this.width = data.data[0].width
            this.height = data.data[0].height
          }
        }
      })
    },
    // 编辑信息
    getInfo() {
      this.$common.handleGet('/broadcasts/' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          this.info = result
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'AdsList' })
        }
      })
    },

    changePosition(id) {
      if (id) {
        const arr = this.positionList.filter((item) => +item.positionId === +id)
        if (arr.length > 0) {
          this.width = arr[0].width
          this.height = arr[0].height
        }
      } else {
        this.width = ''
        this.height = ''
      }
    },

    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.id ? handleFormData('/broadcasts/' + this.id) : handleFormData('/broadcasts/add')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      this.$common
        .handlePost(url, this.info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 跳转到目的路由
              this.$router.push({ name: 'AdsList' })
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>
